<template>
  <div>
    <el-card>
      <!--      -->
      <el-row :gutter="25">
        <!--        添加搜索区-->
        <el-col span="10">
          <el-input placheholder="请输入内容">
            <!--            搜索按钮-->
            <el-button slot="append" icon="el-icon-search">搜索</el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="addUser">添加用户</el-button>
        </el-col>
        <br>
      </el-row>
      <el-table
        :data="userList"
        border
        stripe
        style="width: 100%"
      >

        <el-table-column
          prop="id"
          label="ID"
          width="150"
        />

        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        />

        <el-table-column
          prop="password"
          label="密码"
          width="180"
        />

        <el-table-column
          prop="email"
          label="邮箱"
          width="180"
        />

        <el-table-column
          prop="group.name"
          label="组名"
          width="150"
        />

        <el-table-column label="操作" width="200px">
          <template>
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" />
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" />
            <!-- 权限 -->
            <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" />
            </el-tooltip>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <el-pagination
      :current-page="this.queryInfo.pageNum"
      :page-sizes="[5,10,15]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.totalNumber"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {

  data() {
    return {
      queryInfo: {
        pageNum: 0,
        pageSize: 5
      },
      userList: [],
      totalNumber: 0
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      // eslint-disable-next-line no-unused-vars
      const { data: res } = await this.$http.post('/api/user/findAll/' + this.queryInfo.pageNum + '/' + this.queryInfo.pageSize)
      this.userList = res.userList
      this.totalNumber = res.number
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getUserList()
    },
    handleCurrentChange(newNum) {
      this.queryInfo.pageNum = newNum
      this.getUserList()
    }

  }

}
</script>

<style scoped>

</style>
